<extend name="_Layout/main"/>

<block name="script">
    <style type="text/css">
        /* 文档页面结构样式
        -------------------------------------------------- */
        .manual-nav {
            margin-bottom: 0px;
        }
        .manual-box {
            margin-top: 15px;
            padding-bottom: 80px;
        }
        .manual-box .manual-right header .copylink {
            position: relative;
            float: left;
            margin: 10px 0 0 10px;
        }
        .manual-box .manual-right .copylink a {
            color: #008000;
            text-decoration: none;
            left: 0px;
            top: 0px;
            position: relative;
            float: left;
            margin: 20px 0 0 10px;
        }
        .manual-box .manual-right header {
            margin-bottom: 10px;
        }
        .manual-box .manual-right header .title-link{
            font-size: 12px;
            line-height: 1.8;
            background-color: #C3E1FF;
            border-top: 1px solid #4E6B33;
            clear: both;
            padding: 2px 6px;
        }
        .manual-box .search input[type=search] {
            height: 28px;
            line-height: 18px;
            width: 100%;
            border: 1px solid #CCC;
            padding: 0 8px;
            font-size: 12px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
            border-radius: 14px;
            transition: all 0.15s ease-in;
            box-sizing: border-box;
        }

        /* 文档内容样式
        -------------------------------------------------- */
        .manual-box .manual-right .h1, h1 {
            font-size: 25px;
            font-family: 微软雅黑;
            float: left;
            color: #0382AD;
            text-shadow: 1px 1px 0 #FFFFFF, 1px 1px 2px rgba(0, 0, 0, 0.3);
            font-weight: bold;
        }
        .manual-box .manual-right h2 {
            font-size: 20px;
            font-family: 微软雅黑;
            margin-top: 16px;
            border-bottom: 1px solid #EEE;
            font-weight: bold;
        }
        .manual-box .manual-right h4 {
            font-size: 16px;
            margin-top: 14px;
        }
        .manual-box .manual-right blockquote {
            font-size: 17.5px;
            border-left: 5px solid #D0E3F0;
            margin: 8px 0;
            padding: 8px 16px;
            background-color: #F0F7FD;
            color: #0382AD;
        }

        /* 小屏幕设备不启用绝对定位
        -------------------------------------------------- */
        @media (min-width: 768px) {
            .manual-box .ztree-manual {
                min-height: 500px;
            }
            .manual-box .search {
                left: 1%;
                top: 60px;
                position: absolute;
                padding: 6px;
                background-color: #F9F9F9;
                border: 1px solid #CCC;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            }
            .manual-box .manual-left {
                left: 1%;
                top: 110px;
                bottom: 48px;
                position: absolute;
                overflow: auto;
                border: 1px solid #CCC;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            }
            .manual-box .manual-right {
                left: 18.66666667%;
                width: 80.33333333%;
                right: 1%;
                top: 60px;
                bottom: 48px;
                position: absolute;
                overflow: auto;
                border: 1px solid #CCC;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            }
        }
    </style>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/libs/ztree/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="__PUBLIC__/libs/ztree/js/jquery.ztree.all-3.5.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
            //ztree设置
            var setting = {
                data:{
                    key:{
                        children:'_child',
                        name:'title',
                    }
                },
                callback:{
                    onClick: ztree_node_click
                }
            };

            //回调函数点击事件
            function ztree_node_click(event, treeId, treeNode){
                $.get("{:U('Category/getDetail')}", {id:treeNode.id}, function(data){
                    if(data.status == 1){
                        var node = data.data;
                        node = eval('('+node+')');
                        $('#manual-title').text(node.title); //设置右侧标题
                        $('#ztree-manual-content').html(node.content); //设置右侧文档主题内容
                    }else{
                        $.alertMessager(data.info, 'danger');
                    }
                });
            };

            //获取目录列表
            $.get("{:U('Home/Category/getCategoryTree', array('id' => $__CURRENT_CATEGORY__, 'group' => $__CURRENT_CATEGORY_GROUP__))}").success(function(data){
                if(data.status == 1){
                    var nodes = data.data;
                    $.fn.zTree.init($("#ztree-manual"), setting, eval('('+nodes+')'));
                }else{
                    $.alertMessager(data.info, 'danger');
                }
            });
        });
    </script>
</block>

<block name="jumbotron"></block>

<block name="top-nav"></block>

<block name="main-nav">
    <nav class="manual-nav navbar navbar-inverse navbar-static-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-main">
                    <span class="sr-only">切换导航</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <php>if(C('WEB_SITE_LOGO')):</php>
                    <a class="navbar-brand" href="__ROOT__/"><img alt="logo" class="logo" src="{$Think.config.WEB_SITE_LOGO|get_cover='path'}"></a>
                <php>else:</php>
                    <a class="navbar-brand" href="__ROOT__/">{:C('WEB_SITE_TITLE')}</a>
                <php>endif;</php>
            </div>
            <div class="collapse navbar-collapse navbar-collapse-main">
                <ul class="nav navbar-nav">
                    <li><a href="__ROOT__/">首页</a></li>
                    <corethink:category_list name="vo">
                        <li <if condition='$vo.id eq $__CURRENT_CATEGORY__'> class="active"</if> >
                            <a href="{:U('Document/index', array('cid' => $vo['id']))}">{$vo.title}</a>
                        </li>
                    </corethink:category_list>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <present name="__USER__">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-user"></i> {$__USER__.username}
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="{:U('User/home')}"><i class="fa fa-home"></i> 个人主页</a></li>
                                <li><a href="{:U('User/center')}"><i class="fa fa-tachometer"></i> 个人中心</a></li>
                                <li><a href="{:U('UserMessage/index')}"><i class="fa fa-envelope"></i> 消息中心</a></li>
                                <li><a href="{:U('Addon/index')}"><i class="fa fa-weixin"></i> 微＋平台</a></li>
                                <li class="divider hidden-xs"></li>
                                <li><a href="{:U('User/logout')}" class="ajax-get"><i class="fa fa-sign-out"></i> 退出登录</a></li>
                            </ul>
                        </li>
                    <else />
                        <li><a href="#" data-toggle="modal" data-target="#login-modal">登录</a></li>
                        <li><a href="{:U('User/register')}">注册</a></li>
                    </present>
                </ul>
            </div>
        </div>
    </nav>
</block>

<block name="breadcrumb"></block>

<block name="main">
    <div class="manual-box container-fluid clearfix">
        <!-- 文档搜索 -->
        <div class="col-xs-12 col-sm-2 search">
            <input class="form-control" id="search" type="search" placeholder=" 这个搜索是假的...">
        </div>
        <!-- 文档左侧树状目录结构 -->
        <div class="col-xs-12 col-sm-2 manual-left">
            <div class="ztree ztree-manual" id="ztree-manual"></div>
        </div>
        <!-- 文档右侧正文 -->
        <div class="col-xs-12 col-sm-10 manual-right">
            <!-- 文档右侧正文标题 -->
            <header class="manual-title-box">
                <h1 id="manual-title">序言</h1>
                <div class="copylink">
                    <a href="javascript:;" class=""><span class="fa fa-copy"></span> 复制本页链接</a>
                </div>
                <div class="title-link"></div>
            </header>
            <!-- 文档右侧正文内容 -->
            <div class="ztree-manual box" id="ztree-manual-content">
                {$info.content}
            </div>
        </div>
    </div>
</block>

<block name="footer">
    <footer class="footer navbar-fixed-bottom">
        <div class="container">
            <div class="row">
                <ul class="copyright list-inline text-center">
                    <li>{:C('WEB_SITE_COPYRIGHT')}</li>
                    <li><a class="icp" href="http://www.miibeian.gov.cn/" target="_blank">{:C('WEB_SITE_ICP')}</a></li>
                    <li><a href="{:C('WEBSITE_DOMAIN')}" title="轻量级WEB产品开发框架"><span class="label label-default">CorerThink</span></a></li>
                </ul>
            </div>
        </div>
    </footer>
</block>
